* {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .all {
            width: 100%;
            height: 100%;
            background: url(../imgs/bg.jpg) no-repeat center/cover;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .header {
            width: 100%;
            height: 1rem;
            background: url(../imgs/head_bg.png) no-repeat center/cover,url(../imgs/loading.gif) no-repeat 7.5rem 0/.7rem,url(../imgs/loading.gif) no-repeat 11rem 0/.7rem;
            text-align: center;
            position: relative;

            span {
                color: aliceblue;
                font: .5rem/1rem "华文楷体";
            }

            h5 {
                color: aliceblue;
                font: .3rem/1rem "华文楷体";
                position: absolute;
                right: .5rem;
                top: 0;
            }
        }


        .content {
            width: 100%;
            height: 80%;
            // border: .1rem solid #ccc;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .left {
            height: 96%;
            width: 28%;
            // border: .08rem dashed wheat;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            //  background: url(../imgs/panel.png) no-repeat center/contain;
        }

        .left-top {
            width: 96%;
            height: 30%;
            border: .04rem solid rgba(93, 194, 254, .5 );
            position: relative;
            display: flex;
            // justify-content: space-between;
            // align-items: space-between;
            // flex-wrap: wrap;
            justify-content: center;
            align-items: center;

            .panel1 {
                // width: 32%;
                // height: 40%;
                width: 95%;
                height: 95%;
                // background-color: #ccc;
            }
        }


        .left-botton {
            width: 96%;
            height: 64%;
            border: .04rem solid rgba(93, 194, 254, .5 );
            position: relative;
            // display: flex;
            // justify-content: center;
            // align-items: center;

            .left-botton-content {
                width: 47%;
                height: 47%;
                float: left;
            }
        }

        // =======================   边框   ======================
        .jj {
                 position: absolute;
                 width: 3%;
                 height: 3%;
                 border-radius: 50%;
        }

        .zs {
            left: -.07rem;
            top: -.07rem;
            border-top: .08rem solid turquoise;
            border-left: .08rem solid turquoise;
        }
        .zx {
            bottom: -.07rem;
            left: -.07rem;
            border-bottom: .08rem solid turquoise;
            border-left: .08rem solid turquoise;
        }

        .ys {
            right: -.07rem;
            top: -.07rem;
            border-top: .08rem solid turquoise;
            border-right: .08rem solid turquoise;
        }
        .yx {
            bottom: -.07rem;
            right: -.07rem;
            border-bottom: .08rem solid turquoise;
            border-right: .08rem solid turquoise;
        }

        // =======================   边框   ======================


        .certer {
            height: 96%;
            width: 38%;
            //  border: .08rem dashed turquoise;
             position: relative;
             background: url(../imgs/panel.png) no-repeat center/contain;
        }

        .right {
            height: 96%;
            width: 28%;
            // // border: .08rem dashed wheat;
            //  background: url(../imgs/panel.png) no-repeat center/contain;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        .right-top {
            width: 96%;
            height: 38%;
            border: .04rem solid rgba(93, 194, 254, .5 );
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            .right-top-content {
                width: 95%;
                height:  95%;
            }
        }

        .right-botton {
            width: 96%;
            height: 58%;
            border: .04rem solid rgba(93, 194, 254, .5 );
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            .right-botton-content {
                width: 95%;
                height:  95%;
            }
        }